import { useEffect, useState } from "react";
import { ClockCircleOutlined, MinusCircleFilled, UserOutlined } from "@ant-design/icons";
import { Avatar, Badge, Button, Drawer, Space, Steps, Tag } from "antd";
import { getHistoryList } from "./service";
import { badgeItem, renderFlagFn } from "./consts";

interface Props {
  serialNum: string;
}

const ProcessHistory = (props: Props) => {
  const [dataList, setDataList] = useState<any[]>([]);
  const [visible, setVisible] = useState(false);
  const _getHistoryList = async (serialNum: string) => {
    const res = await getHistoryList(serialNum);
    setDataList(res.data)
  }
  useEffect(() => {
    if (props.serialNum) {
      _getHistoryList(props.serialNum);
    }
  }, [props.serialNum])

  return (
    <>
      <Button type='link' onClick={() => setVisible(true)}>查看流程详情</Button>
      <Drawer
        title="审批意见"
        width={720}
        onClose={() => setVisible(false)}
        visible={visible}
        bodyStyle={{ paddingBottom: 80 }}
        footer={
          <Space style={{ float: 'right' }}>
            <Button onClick={() => setVisible(false)}>取消</Button>
          </Space>
        }
      >
        {dataList.length && <div style={{ width: 300, backgroundColor: '#fff' }}>
          <Steps current={dataList.findIndex(item => item.flag === '1')} direction="vertical">
            {
              dataList.map((item, index) => (
                <Steps.Step key={item.serial} icon={
                  <Badge count={badgeItem[item.flag]} offset={[-8, 25]}>
                    <Avatar icon={<UserOutlined />} src={item.list && item.list[0]?.userImage} />
                  </Badge>
                } title={item.processNode} description={
                  <div>{item.list && item.list[0].zhName} {renderFlagFn(item.flag, index)}</div>
                } />
              ))
            }
            <Steps.Step icon={
              <Avatar icon={<MinusCircleFilled />} />
            } title="流程结束" description={<Tag icon={<ClockCircleOutlined />}>流程结束</Tag>} />
          </Steps>
        </div>}
      </Drawer>
    </>
  )
}

export default ProcessHistory;
